<template>
  <div>
    <table class="table">
      <thead>
          <tr>
            <th>图片</th>
            <th>标题</th>
            <th>描述</th>
            <th>热搜/置顶</th>
            <th>操控</th>
            
          </tr>
      </thead>
      <tbody>
        <Systembody v-for="item in blog" :key="item" 
          :blog="item"
          @isHotAndisTop="isHotAndisTop"
          @del="del"
        ></Systembody>
      </tbody>
    </table>
  </div>
</template>

<script>
import Systembody from '../../components/systembody.vue'
export default {
  components:{
    Systembody
  },
  data(){

    return{
      blog:[
        {
          "id":1,
          "title":"博客",
          "summary":"没有",
          "banner":"https://exp-picture.cdn.bcebos.com/4759c1dae43b3b86bcd8ace2185653bbf9207553.jpg?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_500%2Climit_1%2Fformat%2Cf_jpg%2Fquality%2Cq_80",    
          "isHot":true,
          "isTop":false
      
      }
      ]
    }
  },
  methods:{
    isHotAndisTop(ev){
        //修改状态
        this.$http.post("/isHotAndisTop",this.qs.stringify(ev))
    },
    init(){
      this.$http.post("/getBlogAll").then((ev)=>{
        this.blog=ev.data.object
      })
    },
    del(ev){
       this.$http.post("/del",this.qs.stringify({"id":ev})).then((ev)=>{
          ev.data.object==true?alert("删除成功"):alert("服务器异常")
          location.reload()
       })
    }
  },
  created(){
    this.init()
  }
}
</script>

<style lang="less" scoped>
  .table{
    width: 100%;
    // background: red;
    thead{
      color: saddlebrown;
      font-size: 14px;
      // line-height: 30px;
    }
    tbody{
      text-align: center;
      line-height: 60px;

    
    }
  }
@media screen and (max-width: 450px) {
    .table {
        font-size: 10px;
    }
    tbody /deep/ .href{
      display: none;
    }
    tbody /deep/ .min-href{
      display: block !important;

    }
}
</style>